<template>
    <el-dialog
            title="节点"
            :visible.sync="visible"
            width="1000px"
            @close="onClose"
            :close-on-click-modal="false"
            :before-close="closeEditField"
            class="elformBox"
    >
        <el-form
                :model="stateForm"
                :rules="stateRules"
                ref="stateRuleForm"
                label-width="140px"
                class="demo-ruleForm"
                size="small"
        >
            <el-form-item label="名称" prop="name">
                <tooltipLable
                        slot="label"
                        label="名称"
                        content="请输入状态的名称,如发起人编辑中，发起人tl审批中，结束等"
                ></tooltipLable>
                <el-input v-model="stateForm.name"></el-input>
            </el-form-item>
          <one-row>
            <el-form-item label="是否隐藏" prop="is_hidden" >
              <tooltipLable
                slot="label"
                label="是否隐藏"
                content="开启时,工单详情中step图不显示此状态(当前处于此状态时除外)"
              ></tooltipLable>
              <el-switch
                style="display: block"
                v-model="stateForm.is_hidden"
                active-text="是"
                inactive-text="否"
              >
              </el-switch>
            </el-form-item>
            <el-form-item label="记忆最后一次处理人" prop="remember_last_man_enable" >
              <tooltipLable
                slot="label"
                label="最后一次处理人"
                content="开启后，到达此状态时会先检查之前是否有人在此状态处理过，如果有则处理人为最后一次处理的人"
              ></tooltipLable>
              <el-switch
                style="display: block"
                v-model="stateForm.remember_last_man_enable"
                active-text="是"
                inactive-text="否"
              >
              </el-switch>
            </el-form-item>
          </one-row>
          <one-row>
            <el-form-item label="状态类型" prop="type_id" >
              <tooltipLable
                slot="label"
                label="状态类型"
                content="每个工作流都需要有一个初始状态，一个结束状态，其他为普通状态。初始状态及结束状态无需设置参与人类型及参与人"
              ></tooltipLable>
              <el-radio-group v-model="stateForm.type_id">
                <el-radio :label="0">普通状态</el-radio>
                <el-radio :label="1">初始状态</el-radio>
                <el-radio :label="2">结束状态</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="是否允许转发" prop="enable_retreat" >
              <el-radio-group v-model="stateForm.enable_retreat">
                <el-radio :label="0">不允许</el-radio>
                <el-radio :label="1">允许</el-radio>
                <el-radio :label="2">允许所有</el-radio>
              </el-radio-group>
            </el-form-item>
          </one-row>
          <one-row>
            <el-form-item label="是否需要分发" prop="enable_dist" >
              <tooltipLable
                slot="label"
                label="是否需要分发"
                content="开启后，工单审批是否需要分发按扭"
              ></tooltipLable>
              <el-switch
                style="display: block"
                v-model="stateForm.enable_dist"
                active-text="是"
                inactive-text="否"
              >
              </el-switch>
            </el-form-item>
            <el-form-item label="是否允许加签" prop="enable_add" >
              <tooltipLable
                slot="label"
                label="是否允许加签"
                content="开启后，该节点有加签功能"
              ></tooltipLable>
              <el-switch
                style="display: block"
                v-model="stateForm.enable_add"
                active-text="是"
                inactive-text="否"
              >
              </el-switch>
            </el-form-item>
          </one-row>
          <one-row>
            <el-form-item label="参与人类型" prop="default_value" >
              <tooltipLable
                slot="label"
                label="参与人类型"
                content="初始状态的处理人类型和处理人和选择无和留空(状态的处理人仅供状态变化时确定新的处理人用，不会作为流转时目的状态，所以无需配置)， 结束状态处理人类型和处理人也请选择无和留空，因为结束状态无需人再处理"
              ></tooltipLable>
              <el-select
                v-model="stateForm.participant_type_id"
                placeholder="请选择"
                class="full-width"
              >
                <el-option
                  v-for="item in participantTypeIdList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="参与人" prop="participant" >
              <tooltipLable
                slot="label"
                label="参与人"
                content='个人(username)\多人(多个username以,隔开\部门(部门id，多个部门以逗号隔开)\角色(角色id)\变量(creator:工单的创建人,creator_tl:工单创建人的TL,多个变量逗号隔开)\脚本记录的id\工单字段(逗号隔开多个)\父工单字段(逗号隔开多个)等，需要在此状态创建子工单时需要设置此处处理人为loonrobot。 当处理人类型为hook方式时,处理人需要按照如下规则配置 {"hook_url":"http://xxx.com/xxx", "hook_token":"xxxx", "wait":true, "extra_info":"xxxx"}。详见文档'
              ></tooltipLable>
              <participant-input :type="stateForm.participant_type_id" v-model="stateForm.participant"></participant-input>
            </el-form-item>
          </one-row>
          <one-row>
            <el-form-item label="分配方式" prop="distribute_type_id" >
              <tooltipLable
                slot="label"
                label="分配方式"
                content="直接处理:当前处理人无需接单，主动接单:当前处理人需要先接单再处理，随机分配:工单将随机指定所配置的当前处理人中一个人， 全部处理:当前所有人都需要处理完且处理动作相同才会流转到下个状态"
              ></tooltipLable>
              <el-select
                v-model="stateForm.distribute_type_id"
                placeholder="请选择"
                class="full-width"
              >
                <el-option
                  v-for="item in distributeTypeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="顺序id" prop="order_id" >
              <tooltipLable
                slot="label"
                label="顺序id"
                content="此顺序id,用于获取工单step记录的排序用,因为step是顺序的，而loonflow的工作流是网状的，所以需要指定顺序id以便排序,数字越小越靠前"
              ></tooltipLable>
              <!--                            <el-input v-model="stateForm.order_id"></el-input>-->
              <el-input-number
                v-model="stateForm.order_id"
                :min="1"
                :max="9999"
                label="描述文字"
                class="full-width"
              ></el-input-number>
            </el-form-item>
          </one-row>

            <el-form-item label="表单字段" prop="state_field_str">
                <tooltipLable
                        slot="label"
                        label="表单字段"
                        content='json格式字典存储,包括读写属性1：只读，2：必填，3：可选. 示例：{"gmt_created":1,"title":2, "sn":1}, 内置特殊字段participant_info.participant_name:当前处理人信息(部门名称、角色名称)，state.state_name:当前状态的状态名,workflow.workflow_name:工作流名称'
                ></tooltipLable>
                <el-input
                        v-model="stateForm.state_field_str"
                        style="width: calc(100% - 25px)"
                ></el-input
                >
                <el-button
                        type="text"
                        size="mini"
                        icon="el-icon-refresh-right"
                        style="margin-left: 5px"
                        @click="getFieldList"
                ></el-button>
            </el-form-item>
            <el-form-item label="标签" prop="label">
                <tooltipLable
                        slot="label"
                        label="标签"
                        content="自定义标签，json格式，调用方可根据标签自行处理特殊场景逻辑，loonflow只保存文本内容"
                ></tooltipLable>
                <el-input v-model="stateForm.label"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitState('stateRuleForm')"
      >确 定</el-button
      >
    </span>
    </el-dialog>
</template>
<script>
    import api from "@/api/index";
    import tooltipLable from "@/components/workflows/tooltipLable";
    import qs from "qs";
    import ParticipantInput from "./ParticipantInput";

    export default {
        components: {
            ParticipantInput,
            tooltipLable,
        },
        props: {
            visible: {
                type: Boolean,
                default: false
            },
            row: {
                type: Object,
                default: function () {
                    return {};
                }
            }
        },
        data() {
            const checkJson = (rule, value, callback) => {
                try {
                    JSON.parse(value);
                } catch (e) {
                    //console.log("json 格式错误");
                    callback(new Error("json格式错误"));
                }
                callback();
            };
            return {
                stateId: null,
                stateForm: {
                    workflow: undefined,
                    distribute_type_id: 2,
                    enable_retreat: 0,
                    is_hidden: false,
                    label: "{}",
                    name: "",
                    order_id: null,
                    participant: undefined,
                    participant_type_id: 0,
                    remember_last_man_enable: true,
                    state_field_str: "{}",
                    type_id: 0,
                    enable_dist:false,
                    enable_add:false,
                },
                //处理方式列表
                //处理方式列表
                distributeTypeList: [
                    {id: 1, name: "主动接单"},
                    {id: 2, name: "直接处理"},
                    {id: 3, name: "随机分配"},
                    {id: 4, name: "全部处理"},
                    {id: 5, name: "顺序处理"}
                ],
                stateRules: {
                    name: [{required: true, message: "请输入名称", trigger: "blur"}],
                    order_id: [{required: true, message: "请设置顺序", trigger: "blur"}],
                    type_id: [
                        {required: true, message: "请设置状态类型", trigger: "blur"}
                    ],
                    distribute_type_id: [
                        {required: true, message: "请选择分配方式", trigger: "change"}
                    ],
                    state_field_str: [
                        {
                            validator: checkJson,
                            message: "格式不正确，需要是字典的的json格式"
                        }
                    ],
                    label: [
                        {
                            validator: checkJson,
                            message: "格式不正确，需要是字典的的json格式"
                        }
                    ]
                },
                //参与人类型列表
                participantTypeIdList: [
                    {id: 1, name: "个人"},
                    {id: 2, name: "多人"},
                    {id: 3, name: "部门"},
                    {id: 4, name: "角色"},
                    {id: 5, name: "变量"},
                    {id: 7, name: "工单字段"},
                    {id: 0, name: "无"}
                ],

            };
        },
        created() {
            this.initData(this.row)
        },
        computed: {
        },
        methods: {
            initData(val) {
                let data = val;
                if (data.id) {
                    this.stateId = data.id;
                    let obj = {};
                    for(let o in this.stateForm){
                        obj[o] = data[o]
                        if(typeof data[o] == "object" ){
                            obj[o] = JSON.stringify(data[o])
                        }
                    }
                    this.$nextTick(function () {
                        this.stateForm = obj;
                    });
                } else {
                    this.stateId = null;
                }
                this.stateForm.workflow = this.id = this.$route.query.id;
            },
            getFieldList() {
                api.getFieldSimple(this.id).then(res => {
                            let list = res.data;
                            let initData = {sn: 1, title: 1, creator: 1, gmt_created: 1};
                            list.forEach(item => {
                                initData[item.field_key] = 1;
                            });
                            this.stateForm.state_field_str = JSON.stringify(initData);
                    });
            },
            onClose() {
                this.$refs["stateRuleForm"].resetFields();
            },
            //关闭编辑字段弹窗
            closeEditField() {
                this.$emit("update:visible", false);
            },
            // 提交状态表单
            submitState(formName) {
                this.$refs.stateRuleForm.validate(valid => {
                    if (valid) {
                        let data = JSON.parse(JSON.stringify(this.stateForm))
                        if(data.participant){
                            data.participant = data.participant.toString()
                        }
                        if (this.stateId != null) {
                            api.editState(this.id, this.stateId, data).then(res => {
                                this.msgSuccess("重置成功!");
                                this.closeEditField();
                                this.$emit("reloadList");
                            });
                        } else {
                            api.addState(this.id, data).then(res => {
                                    this.msgSuccess("添加成功!");
                                    this.closeEditField();
                                    this.$emit("reloadList");
                            });
                        }
                    } else {
                        return false;
                    }
                });
            }
        }
    };
</script>
